<template>
    <div>
        <ToolBar>
            <el-button @click="addPart()" type="primary" icon="el-icon-plus" size="small">添加</el-button>
            <div style="float: right">
                <el-input
                        placeholder="搜索客户"
                        size="small"
                        style="width: 140px"
                        v-model="searchParams.postTitle"
                        clearable
                ></el-input>
                <el-button type="success" icon="el-icon-search" size="small" @click="refresh = !refresh"></el-button>
            </div>
        </ToolBar>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="备件ID" width="100">
                <template slot-scope="scope">
                    <!-- <i class="el-icon-star-off"></i> -->
                    <span style="margin-left: 10px">
            <el-tag
                    style="”cursor:pointer”"
                    icon="el-icon-edit"
                    type="primary"
                    @click="getInfo($event)"
            >{{ scope.row.id }}</el-tag>
          </span>
                </template>
            </el-table-column>
            <el-table-column label="备件名称" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-view"></i>
                    <span style="margin-left: 10px">{{ scope.row.partName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备件类型" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-view"></i>
                    <span style="margin-left: 10px">{{ scope.row.partType }}</span>
                </template>
            </el-table-column>
            <el-table-column label="价格（元）" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-view"></i>
                    <span style="margin-left: 10px">{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备件数量" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-view"></i>
                    <span style="margin-left: 10px">{{ scope.row.number }}</span>
                </template>
            </el-table-column>
            <el-table-column label="警戒数量" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-view"></i>
                    <span style="margin-left: 10px">{{ scope.row.alertNumber }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="是否有效"
                    width="100"
                    prop="isEffectice"
                    :formatter="effecticeformat"
                    highlight-current-row="true"
            ></el-table-column>
            <el-table-column
                    label="库存状态"
                    width="100"
                    prop="partStatus"
                    :formatter="statusformat"
                    highlight-current-row="true"
            ></el-table-column>
        </el-table>
    </div>
</template>

<script>
    import ToolBar from "@/components/ToolBar.vue";
    import HelpHint from "@/components/HelpHint.vue";
    import {partList as part} from "../../api/part";
    import {setMap} from "../../utils/dataStorage";

    export default {
        data() {
            return {
                searchParams: {
                },
                tableData: []
            };
        },
        created() {
            this.getList();
        },
        methods: {
            out(index) {
                setMap("id", index);
                this.$router.push({ path: "/part_out" });
            },
            getList() {
                part()
                    .then(r => {
                        this.tableData = r;
                    })
                    .catch(_ => {
                        console.log(_);
                    });
            },
            statusformat(row, column, cellValue, index) {
                if (cellValue == 1) {
                    return "正常";
                } else if (cellValue == 2) {
                    return "临界";
                } else if (cellValue == 3) {
                    return "警示";
                } else if (cellValue == 4) {
                    return "缺货";
                }
            },
            effecticeformat(row, column, cellValue, index) {
                if (cellValue == 0) {
                    return "无效";
                } else if (cellValue == 1) {
                    return "有效";
                }
            },
            addPart() {
                this.$router.push({ path: "/part_add" });
            },
            getInfo(e) {
                console.log(e.currentTarget.innerText);
            }
        },
        components: {
            ToolBar,
            HelpHint
        }
    };
</script>
